<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        用户名：<input type="text" v-model="username"> <span style="color: #f00">{{ msg }}</span>
    </div>
</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">

    new Vue({
        el: '#app',
        data: {
            username: '',
            // msg: '', // msg 的内容是依赖于 username 变化而变化，那么我们就可以考虑把msg变为计算属性，就是说 msg 的值是通过 username 进行计算后得出来的。 如果是计算属性，则不能定义在 data里面了。
        },
        computed: {
            // 定义计算属性是以函数方式定义，但是调用的时候，以模型变量方式调用，不要以函数执行方式调用
            msg() {
                if (this.username.length < 3) {
                    return '*用户名的长度不能少于3位';
                }
                if (this.username.length > 10) {
                    return '*用户名的长度不能多于10位';
                }
                console.log(this.username, '输入合法');
                return '';
            }
        }

    })
</script>

</html>
